<template>
	<div class="main">
<!-- 		<a-card class="footages" title="添加个人模板" @click="insert">
			<img src="../assets/cil-image-plus.svg" style="opacity: 0.3" />
		</a-card> -->
		<a-card class="footages" v-for="item,index in templateList" :span="6" :key="index">
      <template v-slot:title> {{item.label}}  </template>
			<div class="deleteBot" @click="delTemplate(item.id)">
				<DeleteOutlined />
			</div>
			<div class="downBot" @click="downloadFootage(item)">
				<DownloadOutlined />
			</div>
			<div class="templateimg"><img :src="item.src" /></div>
		</a-card>
		<Modal v-model="showModal" title="请选择" @on-ok="insertImgFile" @on-cancel="showModal = false,imgFile = null ">
			<Upload :before-upload="handleUpload" action="#">
				<Button icon="ios-cloud-upload-outline">选择图片文件</Button>
			</Upload>
			<img class="uploadImg" :src="imgFile" />
			<Input v-model="imgName" placeholder="请输入素材名称"></Input>
		</Modal>
	</div>
</template>
<script>
	import {
		getImgStr,
		downFontByJSON
	} from "@/utils/utils";
	import {
		v4 as uuid
	} from 'uuid';
	import {
		DeleteOutlined,
		DownloadOutlined
	} from '@ant-design/icons-vue';
	import { fabric } from "fabric";
	export default {
		name: '个人模板/iTempalte',
		components: {
			DeleteOutlined,
			DownloadOutlined
		},
		data() {
			return {
				showModal: false,
				imgFile: '',
				imgName: '',
				jsonFile: null,
				templateList: [
          // {
          //   label: '模板',
          //   tempUrl: './template/a4fb54fc-45eb-4fdc-aee4-7a6a5e569084.json',
          //   src: './template/a4fb54fc-45eb-4fdc-aee4-7a6a5e569084.png',
          // },
          // {
          //   label: '模板',
          //   tempUrl: './template/88787fc2-896d-49e2-8501-e27e8787bbfc.json',
          //   src: './template/88787fc2-896d-49e2-8501-e27e8787bbfc.png',
          // },
          // {
          //   label: '模板',
          //   tempUrl: './template/44dfe878-c309-4bb1-8a5c-c3e64db4e125.json',
          //   src: './template/44dfe878-c309-4bb1-8a5c-c3e64db4e125.png',
          // },
          //   {
					// 	label: '笔记模板',
					// 	tempUrl: './template/073606d4-22de-491b-8b51-b90d72101d89.json',
					// 	src: './template/073606d4-22de-491b-8b51-b90d72101d89.png',
					// },
					// {
					// 	label: '醒目封面',
					// 	tempUrl: './template/dcebee41-59b5-408b-a65a-c51bc390be3d.json',
					// 	src: './template/dcebee41-59b5-408b-a65a-c51bc390be3d.png',
					// },
					// {
					// 	label: '教师节',
					// 	tempUrl: './template/3a7471f2-b8cf-4939-ad1a-a7d586768640.json',
					// 	src: './template/3a7471f2-b8cf-4939-ad1a-a7d586768640.png',
					// }
				]
			}
		},
		methods: {
      initList(){
        if(this.$store.state.token === ""){
          confirm("请先登录")
          return
        }
        this.templateList = []
        this.$http.post(
            'api/posterEditor/getITemplate/',
            {
              token : this.$store.state.token,
            }
        ).then( res => {
          console.log(res)
          for(var item of res.data){
            this.templateList.push({
              id:item.pk,
              label:item.fields.i_template_name || "未命名",
              src:'api/'+item.fields.i_template_png_src,
              tempUrl:'api/'+item.fields.i_template_src,
            })
          }
        })
      },
      delTemplate(id) {
        console.log("删除该id的个人模板");
        this.$http.post(
            'api/posterEditor/deleteITemplate/',
            {
              token : this.$store.state.token,
              id : id,
            }
        ).then( res => {
          if(res.data.code === 0){
            confirm(res.data.message)
          }else{
            confirm('删除成功')
            this.initList()
          }
        })
      },
			downloadFootage(item) {
				console.log("下载该id的图片");

				const fileUrl = item.src; // 文件的URL地址
				fetch(fileUrl, {
						mode: 'no-cors'
					})
					.then(response => response.blob())
					.then(blob => {
						const url = window.URL.createObjectURL(blob);
						const link = document.createElement('a');
						link.href = item.tempUrl;
						link.setAttribute('download', item.name);
						document.body.appendChild(link);
						link.click();
					})
					.catch(error => {
						console.error(error);
					});
			},

		},
		mounted() {
      this.initList()
		}
	}
</script>
<style>
	.main {
		display: inline-block;
		background-color: rgb(80, 89, 110);
		width: 100%;
		min-height: 100%;
    padding-top: 8px;
  }

	.footages {
		height: 450px;
		text-align: center;
		display: inline-block;
		vertical-align: middle;
		width: 380px;
		/*height: 400px;*/
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 15px;
		color: gray;


		.templateimg {
			/*position: fixed;*/
			width: 100%;
			height: 360px;
			margin: auto;

			img {
				margin: auto;
				max-height: 100%;
				max-width: 100%;
				/*width: 100%;*/
				/*height: 100%;*/
			}
		}
	}

	.deleteBot {
		position: absolute;
		right: 15px;
		top: 15px;
		/* color: #ff0000; */
	}

	.downBot {
		position: absolute;
		right: 15px;
		top: 35px;
	}

	.uploadImg {
		max-height: 200px;
		max-width: 200px;
	}
</style>